<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
        }
        #login{
            width:350px;
            height: 250px;
            border: 1px solid #00c3ea;
            background: #00A000;
            position: absolute;
            /*left: 50%;
            top: 50%;
            margin-top:-125px;
            margin-left: -175px;*/
        }
        #login span{
            position: absolute;
            right: 0;
            top: 0;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<a href="https://www.baidu.com">显示</a>
<div id="login">
    <span>关闭</span>
</div>
</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        $(window).resize(function () {
            box()

        })
        function box() {
            //        获取body的宽度
            var screenWidth = $(document.body).outerWidth();
//        alert(screenWidth)
//        获取body的高度

            var screenHeight = $(document.body).outerHeight();
//        alert(screenHeight)
//        获取盒子的宽度
            var boxWidth= $("#login").outerWidth();
//        获取盒子的高度
            var boxHeight = $("#login").outerHeight();
//        设置盒子水平以及垂直居中
            $("#login").css({
                left:(screenWidth -boxWidth) /2,
                top :(screenHeight -boxHeight) /2
            })
        }
        box()


        $("a").click(function () {
            $("#login").show(2000)
            return false;
        })

        $("span").click(function () {
            $("#login").hide(2000);
        })

    })
</script>